<style lang="less">
.savebt{
  position: fixed;
  right: 50px;
  top: 100px;
  z-index: 10000;
  width: 90px;
  font-size: 12px;
}
</style>
<template>
  <page-default>
<!-- 
    <q-dialog
      v-model="shouwthis"
      full-width
      full-height
      @hide="shouwthis= false"
    > -->
             <McEditor
         v-if="ready"
          :language="'yaml'"
          :codes="yamlconf"
          @onMounted="cssOnMounted"
          @onCodeChange="cssOnCodeChange" />
    <!-- </q-dialog> -->
    <q-btn color="primary" @click="saveYaml" label="保存" size="lg" class="savebt" />
  

  <!-- <editor   v-if="ready" v-model="yamlconf" @init="editorInit" lang="yaml" theme="chrome" width="100%" height="400"></editor> -->

  </page-default>
</template>

<script>

import { mapActions, mapGetters } from 'vuex'
import DiyService from '../../../_services/DiyService'
import PageDefault from '../../../components/_commons/PageDefault'
import McEditor from './mceditor'


export default {
  name: 'PageHTTPMiddlewares',
  components: {
    PageDefault,
    McEditor,
    // editor: require('vue2-ace-editor'),
  },
  data () {
    return {
        ready: false,
        upstream:[""],
        hasmid: false,
        yamlconf:'',
        shouwthis: !0
    }
  },
  computed: {
    ...mapGetters('http', { allMiddlewares: 'allMiddlewares' })
  },
  created(){
      this.refreshAll()
  },
  methods: {
    ...mapActions('http', { getAllMiddlewares: 'getAllMiddlewares' }),
    onSubmit() {
    },
    //  editorInit: function () {
    //         require('brace/ext/language_tools') //language extension prerequsite...
    //         require('brace/mode/yaml')    //language
    //         require('brace/theme/chrome')
    //         // require('brace/snippets/yaml') //snippet
    //     },
    addUpstream(index){
        let upstream = this.upstream
        upstream.splice(index, 0, "")
        this.upstream = upstream
    },
    delUpstream(index){
        let upstream = this.upstream
        upstream.splice(index, 1)
        this.upstream = upstream
    },
     htmlOnMounted(edit){
      this.htmlEditor = edit;
    },
    javascriptOnMounted(edit){
      this.jsEditor = edit;
    },
    cssOnMounted(edit){
      this.cssEditor = edit;
    },
    saveYaml(){
      
      DiyService.saveYaml(this.yamlconf)
        .then(body => {
          this.$q.dialog({
            dark: true,
            title: '提示',
            message: body.message
          }).onOk(() => {
            console.log('OK')
          }).onCancel(() => {
            console.log('Cancel')
          }).onDismiss(() => {
            console.log('I am triggered on both OK and Cancel')
          })
          // this.ready = true
          
          // return body
        })
        .catch(error => {
         this.$q.dialog({
            dark: true,
            title: '提示',
            message: "保存失败,请刷新页面"
          }).onOk(() => {
            console.log('OK')
          }).onCancel(() => {
            console.log('Cancel')
          }).onDismiss(() => {
            console.log('I am triggered on both OK and Cancel')
          })
          // commit('getAllRoutersFailure', error)
          return Promise.reject(error)
        })
    },
    htmlOnCodeChange(value,event){},
    javascriptOnCodeChange(value,event){},
    cssOnCodeChange(value,event){
      // console.log(value)
      this.yamlconf = value
    },
    refreshAll(){
        DiyService.getYaml()
        .then(body => {
          console.log(body)
          if(body.error == 0){
            this.yamlconf = body.data
          }
          this.ready = true
          
          // return body
        })
        .catch(error => {
          this.ready = true
          console.log(error)
          // commit('getAllRoutersFailure', error)
          return Promise.reject(error)
        })
    },
  },
  watch: {
    'status' () {
      this.refreshAll()
    },
    'filter' () {
      this.refreshAll()
    }
  },
  created () {

  },
  mounted () {
    this.refreshAll()
  },
  beforeDestroy () {
    this.$store.commit('http/getAllMiddlewaresClear')
  }
}
</script>

<style scoped lang="scss">

</style>
